<template>
  <NewMianModule :title="startT + title" num="05">
    <div class="content">
      <div class="top_wrap mb">
        <div
          class="content_item_wrap"
          :class="index == 0 ? 'mr' : ''"
          v-for="(item, index) in topDetailList"
          :key="index"
        >
          <div class="content_title top-title_40">{{ item.name }}</div>
          <div class="num_wrap">
            <div class="content_num">{{ item.value }}</div>
            <div class="content_unit">{{ item.util }}</div>
          </div>
        </div>
      </div>

      <div class="bottom_wrap">
        <div
          class="bottom_item"
          :class="index != bottomDetailList.length - 1 ? 'shu' : ''"
          v-for="(item, index) in bottomDetailList"
          :key="index"
        >
          <div class="content_item_wrap" :class="jndex == 0 ? 'mb' : ''" v-for="(jtem, jndex) in item" :key="jndex">
            <div class="content_title">{{ jtem.name }}</div>
            <div class="num_wrap">
              <div class="content_num bot-title_68">{{ jtem.value }}</div>
              <div class="content_unit" style="width: 78px">{{ jtem.util }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </NewMianModule>
</template>

<script>
import NewMianModule from '../../../NewMianModule/index'
//import { rightData } from '../../../right/newOneRight/rightData.js'
export default {
  props: {
    title: {
      type: String,
      default: '收单服务优惠统计',
    },
    startT: {
      type: String,
      default: '',
    },
    qgData: {
      type: Object,
      default: () => {}, // es6的箭头函数
    },
  },
  components: {
    NewMianModule,
  },
  data() {
    return {
      topDetailList: this.qgData['05']['topData'],
      bottomDetailList: this.qgData['05']['bottomData'],
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.top_wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.bottom_wrap {
  width: 100%;
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}
.bottom_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
}
</style>
